<template>
  <view>
    <view v-if="list.length>0">
      <view v-for="(item,index) in list" :key='index' class="all">
        <view class="top">
          <view>
            <view>{{item.name}}</view>
            <view>{{item.phone}}</view>
            <view>{{item.area}}{{item.addressDetail}}</view>
          </view>
          <image src="../../static/删除.png"></image>
        </view>
        <view class=" right">
          <view class="in">编辑地址</view>
        </view>
      </view>
    </view>
    <view v-else>
      <view class="all">
        <view class="bottom">暂无更多信息</view>
      </view>
    </view>
    <button @tap="gotonewaddress">添加新的地址</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [],
      }
    },

    onLoad: function() {
      const that = this
      uni.request({
        url: getApp().globalData.baseUrl + '/getAllAddress',
        method: 'post',
        data: {
          userId: uni.getStorageSync("userId"),
        },
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        success(res) {
          // console.log(res)
          that.list = res.data
        }
      })
    },
    onUnload() {
      uni.navigateBack({
        delta: 10
      });
    },

    methods: {
      gotonewaddress() {
        uni.navigateTo({
          url: "/pages/my/newAddress"
        })
      },
    },
  }
</script>

<style>
  .all {
    margin: 20rpx 20rpx 10rpx 20rpx;
    border: white 10rpx solid;
    border-radius: 10rpx;
    background-color: white;
    /* position: relative; */
  }

  .top {
    display: flex;
    justify-content: space-around;

  }

  .all image {
    height: 40rpx;
    width: 40rpx;
  }

  .right {
    display: flex;
    justify-content: flex-end;
  }


  .bottom {
    height: 300rpx;
    line-height: 300rpx;
    text-align: center;
  }

  button {
    border-radius: 60rpx;
    width: 80%;
    background-color: black;
    color: white;
  }
</style>